<!-- vue3 <script setup> 版本 -->
<template>
  <el-dialog class="addRole-modal" v-model="visible" :title="modal.title" @close="close">
    <el-form ref="formRef" :model="form" :rules="formRules" :label-width="90">
      <el-form-item label="角色编号" prop="roleCode">
        <el-input v-model="form.roleCode" />
      </el-form-item>
      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="form.roleName" />
      </el-form-item>
      <!-- <el-form-item label="标签" prop="tag">
        <el-select v-model="form.tag" style="width: 100%" clearable placeholder="请选择标签">
          <el-option
            v-for="item in roleTagList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="资源类型" prop="resourceType" v-if="resourceList.length">
        <el-select v-model="form.resourceType" class="w-full" multiple>
          <el-option :key="item.clientManagerId" v-for="item in resourceList" :label="item.managerName" :value="item.clientManagerId"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="备注" name="remark" prop="remark">
        <el-input v-model="form.remark" />
      </el-form-item>
      <!-- <el-form-item label="应用于所有用户" :label-width="120">
        <el-radio-group v-model="form.apply" :disabled="!!defaultData">
          <el-radio :label="0">不应用</el-radio>
          <el-radio :label="1">应用</el-radio>
        </el-radio-group>
      </el-form-item> -->
    </el-form>
    <template #footer>
      <div class="flex justify-end">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submit(formRef)" :loading="loading">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, toRefs, watch, nextTick, Ref} from 'vue';
import type { FormInstance } from 'element-plus'
import { addRole, updateRole } from '/@/api/role';
import { useMessage } from '/@/hooks/web/useMessage';

const { createMessage } = useMessage();
const loading = ref(false);
const props = defineProps({
  data: {
    type: Object || undefined,
    default: () => undefined
  },
  roleTagList: {
    type: Array<{label: string; value: number}>,
    default: () => []
  },
  visible: {
    type: Boolean,
    default: () => false,
  }
});

const resourceList = ref([]) as Ref<Array<any>>;
const modal = reactive({
  title: '新建角色',
  updateMode: false,
  submitEvent: () => null as any,
});
const formRef = ref();
const form = reactive({
    id: undefined,
    roleCode: '',
    roleName: '',
    apply: 0,
    appId: undefined as unknown as number,
    remark: '',
    sort: 1,
    delFlag: 0,
    lockFlag: 0,
    tag: '',
    resourceType: [],
  });
  const formRules = {
    roleCode: [{ required: true, message: '请输入角色编号', trigger: 'blur' }],
    roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
  };
  const { visible, data: defaultData } = toRefs(props);

  const emit = defineEmits(['success', 'update:visible']);

  const updateAction = async () => {
    let params = {
      id: form.id,
      roleCode: form.roleCode,
      roleName: form.roleName,
      autoFlag: form.apply,
      remark: form.remark,
      tag: form.tag,
    clientManagerIds: form.resourceType,
    };
    loading.value = true;
    let { code, msg } = await updateRole(params);
    loading.value = false;
    if (code == 200) {
      createMessage({
        message: msg,
      });
      emit('success');
      close();
    }
  };
  const createAction = async () => {
    let params = {
      id: '',
      roleCode: form.roleCode,
      roleName: form.roleName,
      autoFlag: form.apply,
      remark: form.remark,
      tag: form.tag,
      sort: 1,
      delFlag: 0,
      lockFlag: 0,
    clientManagerIds: form.resourceType,
    };
    loading.value = true;
    let { code, msg } = await addRole(params);
    loading.value = false;
    if (code == 200) {
      createMessage({
        message: msg,
      });
    emit('success')
    close();
  }
};
modal.submitEvent = updateAction;

  watch(visible, async (nv: any) => {
    if (nv) {
      modal.updateMode = props.data?.id ? true : false;
      modal.title = modal.updateMode ? '编辑角色' : '新建角色';
      modal.submitEvent = modal.updateMode ? updateAction : createAction;
      if (modal.updateMode) {
        nextTick(() => {
          form.id = defaultData?.value?.id;
          form.roleCode = defaultData?.value?.roleCode;
          form.roleName = defaultData?.value?.roleName;
          form.apply = defaultData?.value?.autoFlag;
          form.appId = defaultData?.value?.clientModel?.id;
          form.remark = defaultData?.value?.remark;
          form.tag = defaultData?.value?.tag;
        });
      }
    }
  });

  const submit = (formRef: FormInstance) => {
    formRef.validate((v) => {
      if (v) {
        modal.submitEvent();
      }
    });
  };

  const close = () => {
    formRef.value.resetFields();
    emit('update:visible', false);
  };
</script>

<style lang="less">
  .addRole-modal {
    .ant-modal-body {
      padding: 20px;
    }
  }
</style>
